<template>
  <el-dialog
    title="分销商品"
    :visible.sync="dialogVisible"
    width="500px"
    :before-close="handleClose"
  >
    <el-form
      :model="formValidate"
      ref="formValidate"
      label-width="100px"
      class="demo-ruleForm"
      v-loading="loading"
    >
      <el-form-item label="商品ID" prop="goodId">
        <div class="acea-row">
          <el-input
            v-model.number="formValidate.goodId"
            placeholder="请输入商品ID"
            :disabled="isLockStore"
          >
            <el-button
              slot="append"
              @click="getStore()"
              v-if="isLockStore === false"
            >确定
            </el-button
            >
          </el-input
          >
        </div>
      </el-form-item>
      <el-form-item label="商品图" prop="goodPic">
        <div class="upLoadPicBox">
          <div v-if="formValidate.goodPic" class="pictrue">
            <img :src="formValidate.goodPic"/>
          </div>
          <div v-else class="upLoad">
            <i class="el-icon-camera cameraIconfont"/>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="商品名称" prop="goodName">
        <el-input
          v-model="formValidate.goodName"
          :disabled="isLockStore"
        ></el-input>
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input
          v-model="formValidate.price"
          :disabled="isLockStore"
        ></el-input>
      </el-form-item>
      <el-form-item label="一级佣金(¥)" prop="oneReward">
        <el-input v-model="formValidate.oneReward"></el-input>
      </el-form-item>
      <el-form-item label="二级佣金(¥)" prop="twoReward">
        <el-input v-model="formValidate.twoReward"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="resetForm('formValidate')">取 消</el-button>
      <el-button type="primary" @click="submitForm('formValidate')"
      >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import {
  levelGoodAddApi, levelGoodUpdateApi,
  sroreRewardAddApi,
  sroreRewardInfoApi,
  sroreRewardUpdateApi
} from '@/api/user'
import { productDetailApi } from '@/api/store'
import { orderListApi } from '@/api/order'

const obj = {
  id: null,
  goodId: '',
  goodPic: '',
  goodName: '',
  price: '',
  oneReward: '',
  twoReward: ''
}
export default {
  name: 'CreatGrade',
  data() {
    return {
      dialogVisible: false,
      formValidate: Object.assign({}, obj),
      loading: false,
      rules: {
        name: [{ required: true, message: '请输入等级名称', trigger: 'blur' }],
        grade: [
          { required: true, message: '请输入等级', trigger: 'blur' },
          { type: 'number', message: '等级必须为数字值' }
        ],
        discount: [{ required: true, message: '请输入折扣', trigger: 'blur' }],
        experience: [
          { required: true, message: '请输入经验', trigger: 'blur' },
          { type: 'number', message: '经验必须为数字值' }
        ],
        icon: [{ required: true, message: '请上传图标', trigger: 'change' }],
        image: [
          { required: true, message: '请上传用户背景', trigger: 'change' }
        ]
      },
      isLockStore: false
    }
  },
  methods: {
    info(id) {
      if (id === null) {
        this.formValidate.id = id
        return
      }
      this.loading = true
      sroreRewardInfoApi({ id: id })
        .then(res => {
          this.formValidate = res
          this.isLockStore = true
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    getStore() {
      if (this.isLockStore) {
        this.isLockStore = false
        this.formValidate.goodPic = ''
        this.formValidate.goodName = ''
        this.formValidate.price = ''
      } else {
        productDetailApi(this.formValidate.goodId).then(res => {
          this.isLockStore = true
          this.formValidate.goodPic = res.image
          this.formValidate.goodName = res.storeName
          this.formValidate.price = res.price
        })
      }
    },
    handleClose() {
      this.dialogVisible = false
      this.$refs['formValidate'].resetFields()
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading = true
          // 检查是否含有待支付订单
          this.checkWaitOrder().then(res => {
            if (res > 0) {
              this.$confirm(`提示，您有未支付的订单，更改奖励后，未支付的订单奖励也会更改，请确认是否变更奖励！`, '提示', {
                confirmButtonText: '是，变更奖励',
                cancelButtonText: '否，不变更',
                type: 'warning'
              }).then(() => {
                this.formValidate.id ? this.handleUpdate() : this.handleAdd()
              }).catch(() => {
                this.$message.success('已取消')
                this.loading = false
                this.handleClose()
              })
            } else {
              this.formValidate.id ? this.handleUpdate() : this.handleAdd()
            }
          })
        } else {
          return false
        }
      })
    },
    checkWaitOrder() {
      return new Promise((resolve, reject) => {
        const condition = {
          page: 1,
          limit: 10,
          status: 'unPaid'
        }
        orderListApi(condition).then(
          res => {
            resolve(res.top.count)
          },
          err => {
            this.$dialog.error(err.message)
            reject(err)
          }
        )
      })
    },
    handleAdd() {
      sroreRewardAddApi(this.formValidate)
        .then(res => {
          this.$message.success('添加成功')
          this.loading = false
          this.handleClose()
          this.$parent.getList()
        })
        .catch(() => {
          this.loading = false
        })
    },
    handleUpdate() {
      sroreRewardUpdateApi(this.formValidate)
        .then(res => {
          this.$message.success('编辑成功')
          this.loading = false
          this.handleClose()
          this.formValidate = Object.assign({}, obj)
          this.$parent.getList()
        })
        .catch(() => {
          this.loading = false
        })
    },
    resetForm(formName) {
      this.dialogVisible = false
      this.isLockStore = false
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style scoped></style>
